<style scoped>
.car-offer{
    padding: 15px;
}
.offer-title{
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    height: 35px;
    line-height: 35px;
    background-color: #edf2f6;
}
.offer-link{
    float: right;
    text-decoration: underline;
    color: #fe7203;
}
/* .car-info{
    
} */
.car-info-box{
    display: flex;
    border: 1px solid #ddd;
}
.car-info-box-params{
    width: 135px;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
}
.car-info-box-value{
    flex: 1;
    overflow: hidden;
    padding-left: 15px;
    line-height: 40px;
}
/* .no-padr{
    border-right: none;
} */
.offer-date{
    background-color: #f4f4f4;
    padding: 15px;
    margin-bottom: 20px;
}
.offer-date-h3{
    padding-left: 15px;
    font-size: 14px;
    line-height: 1;
    position: relative;
}
.offer-date-h3:before{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width:4px;
    background-color:#3db1fa;
}
.offer-date .ivu-form-item,.offer-coverage .ivu-form-item{
    margin-bottom: 0 !important;
}
.offer-date-message{
    color: #ff4335;
}
.offer-date-switch,.offer-coverage-switch{
    text-align: right;
}
.offer-coverage{
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
}
.offer-result-title{
    margin: 20px 0;
    padding: 15px;
    background-color: #edf2f6;
}
.result-title-company{
    font-weight: bold;
}
.result-title-company img{
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
}
.re-insured-tag{
    display: inline-block;
    vertical-align: middle;
    background-color: #ffa519;
    color: #fff;
    text-align: center;
    padding: 3px 10px;
    font-weight: normal;
    border-radius: 20px;
    margin-left: 50px;
}
.result-title-right{
    text-align: right;
}
.result-title-right-link{
    margin-right: 25px;
}
.offer-result-detail-title{
    padding: 15px;
    background-color: #f4f4f4;
}
.result-detail-type h3{
    position: relative;
    font-weight: normal;  
    padding-left: 15px; 
}
.result-detail-type h3:before{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width:4px;
    background-color:#3db1fa;
}
.result-detail-type-r{
    text-align: right;
    font-weight: bold;
}
.offer-result-detail-list{
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
}
.result-detail-list-right{
    text-align: right;
}
.offer-result-detail-money{
    margin: 20ox 0;
    padding: 15px;
    color: #fd4803;
    font-weight: bold;
    font-size: 16px;
}
.offer-result-detail-money b{
    font-size: 20px;
}
.next-step{
    text-align: right;
}
.next-step span{
    display: inline-block;
    padding: 10px 35px;
    background-color: #2ba8f8;
    color: #fff;
    text-align: center;
    border-radius: 60px;
    cursor: pointer;
}
.statement{
    text-align: center;
}
.statement span{
    color: #fd4803;
    text-decoration: underline;
    cursor: pointer;
}
.insurerNameBtn{
    display: inline-block;
    padding: 5px 20px 5px 10px;;
    border: 1px solid #ea413c;
    border-radius: 3px;
    position: relative;
}
.insurerNameBtn span{
    position: absolute;
    right: 0;
    top: 0;
    width: 0; 
    height: 0; 
    border-top: 20px solid red; 
    border-left: 20px solid transparent;
}
.insurerNameBtn span:after{
    position: absolute;
    right: 1px;
    top: -18px;
    content: '';
    width:10px;
    height: 5px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
</style>

<style>
.common-car-title{
    border-bottom:1px solid #f2f2f2;
    overflow: hidden;
    padding:10px 0;
}
.common-car-title h3{
    position: relative;
    display: inline-block;
    font-size:16px;
    padding-left:15px;
}
.common-car-title h3:before{
    content:'';
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width:3px;
    background-color:#3db1fa;
}
.common-title-r{
    width : 250px;
    float: right;
}

</style>

<template>
    <div>
        <product-title></product-title>
        <div class="car-offer">
            <div class="common-car-title">
                <h3>投保确认</h3>
                <div class="common-title-r">
                    <Steps :current="4" size="small">
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                        <Step title=""></Step>
                    </Steps>
                </div>
            </div>
            <div class="offer-title">
                保单配送信息    
            </div>
            <div class="car-info">
                <Row>
                    <Col span="12">
                        <div class="car-info-box">
                            <div class="car-info-box-params">姓名</div>
                            <div class="car-info-box-value">{{stateCarinfo.addresseeName}}</div>
                        </div>
                    </Col>
                    <Col span="6">
                        <div class="car-info-box">
                            <div class="car-info-box-params">手机号</div>
                            <div class="car-info-box-value">{{stateCarinfo.addresseeMobile}}</div>
                        </div>
                    </Col>
                    <Col span="6">
                        <div class="car-info-box">
                            <div class="car-info-box-params">邮箱</div>
                            <div class="car-info-box-value">{{stateCarinfo.policyEmail}}</div>
                        </div>
                    </Col>
                    <Col span="12">
                        <div class="car-info-box">
                            <div class="car-info-box-params">地区</div>
                            <div class="car-info-box-value">{{stateCarinfo.addresseeProvinceName}}-{{stateCarinfo.addresseeCityName}}-{{stateCarinfo.addresseeCountyName}}</div>
                        </div>
                    </Col>
                    <Col span="12">
                        <div class="car-info-box">
                            <div class="car-info-box-params">详细地址</div>
                            <div class="car-info-box-value">{{stateCarinfo.addresseeDetails}}</div>
                        </div>
                    </Col>
                </Row>                                    
            </div>
            <div class="offer-title">
                车主信息    
            </div>
            <div class="car-info">
                <Row>
                    <Col span="8">
                        <div class="car-info-box">
                            <div class="car-info-box-params">姓名</div>
                            <div class="car-info-box-value">{{stateCarinfo.ownerName}}</div>
                        </div>
                    </Col>
                    <Col span="8">
                        <div class="car-info-box">
                            <div class="car-info-box-params">证件号</div>
                            <div class="car-info-box-value">{{stateCarinfo.ownerID}}</div>
                        </div>
                    </Col>
                    <Col span="8">
                        <div class="car-info-box">
                            <div class="car-info-box-params">手机号</div>
                            <div class="car-info-box-value">{{stateCarinfo.ownerMobile}}</div>
                        </div>
                    </Col>                    
                </Row>                                    
            </div>
            <div class="offer-title">
                投保人信息    
            </div>
            <div class="car-info">
                <Row>
                    <Col span="8">
                        <div class="car-info-box">
                            <div class="car-info-box-params">姓名</div>
                            <div class="car-info-box-value">{{stateCarinfo.applicantName}}</div>
                        </div>
                    </Col>
                    <Col span="8">
                        <div class="car-info-box">
                            <div class="car-info-box-params">证件号</div>
                            <div class="car-info-box-value">{{stateCarinfo.applicantID}}</div>
                        </div>
                    </Col>
                    <Col span="8">
                        <div class="car-info-box">
                            <div class="car-info-box-params">手机号</div>
                            <div class="car-info-box-value">{{stateCarinfo.applicantMobile}}</div>
                        </div>
                    </Col>                    
                </Row>                                    
            </div>
            <div class="offer-title">
                被保人信息    
            </div>
            <div class="car-info">
                <Row>
                    <Col span="8">
                        <div class="car-info-box">
                            <div class="car-info-box-params">姓名</div>
                            <div class="car-info-box-value">{{stateCarinfo.insuredName}}</div>
                        </div>
                    </Col>
                    <Col span="8">
                        <div class="car-info-box">
                            <div class="car-info-box-params">证件号</div>
                            <div class="car-info-box-value">{{stateCarinfo.insuredID}}</div>
                        </div>
                    </Col>
                    <Col span="8">
                        <div class="car-info-box">
                            <div class="car-info-box-params">手机号</div>
                            <div class="car-info-box-value">{{stateCarinfo.insuredMobile}}</div>
                        </div>
                    </Col>                    
                </Row>                                    
            </div>
            <div class="offer-title">
                车辆信息
            </div>
            <div class="car-info">
                <Row>
                    <Col span="12">
                        <div class="car-info-box">
                            <div class="car-info-box-params">车牌号</div>
                            <div class="car-info-box-value">{{stateCarinfo.licenseNo}}</div>
                        </div>
                    </Col>
                    <Col span="12">
                        <div class="car-info-box">
                            <div class="car-info-box-params">品牌型号</div>
                            <div class="car-info-box-value">{{stateCarinfo.brandName}}</div>
                        </div>
                    </Col>
                    <Col span="12">
                        <div class="car-info-box">
                            <div class="car-info-box-params">车架号</div>
                            <div class="car-info-box-value">{{stateCarinfo.frameNo}}</div>
                        </div>
                    </Col>
                    <Col span="6">
                        <div class="car-info-box">
                            <div class="car-info-box-params">发动机号</div>
                            <div class="car-info-box-value">{{stateCarinfo.engineNo}}</div>
                        </div>
                    </Col>
                    <Col span="6">
                        <div class="car-info-box">
                            <div class="car-info-box-params">登记日期</div>
                            <div class="car-info-box-value">{{stateCarinfo.firstRegisterDate}}</div>
                        </div>
                    </Col>
                </Row>                                    
            </div>
            <div class="offer-title">
                保障内容
            </div>
            
            <div class="offer-result">
                <div class="offer-result-title">
                    <Row type="flex"  align="middle">
                        <Col span="24">
                            <!-- <img src="../../asset/img/com_logo.jpg" /> 人保 -->
                            <!-- <span class="re-insured-tag">续保</span> -->
                            <!-- 人保 -->
                            已选险种：
                            <p>
                                <span  v-if="stateCarQuote.ciPremium > 0">交强险、</span><span v-for="(sitem,sindex) in stateCarQuote.coverageList"> {{sitem.coverageName}}、</span>
                            </p>
                            <div v-if="stateCarinfo.insurerName" class="insurerNameBtn">
                                <span></span>
                                {{stateCarinfo.insurerName}}
                            </div>
                        </Col>
                    </Row>
                </div>
                <div class="offer-result-detail">
                    <div v-if="stateCarQuote.ciPremium > 0">
                        <div class="offer-result-detail-title">
                            <Row type="flex"  align="middle">
                                <Col span="12" class="result-detail-type">
                                    <h3>交强险</h3>
                                </Col>
                                <Col span="12" class="result-detail-type-r">
                                    ￥{{((stateCarQuote.ciPremium *100 + stateCarQuote.carshipTax * 100)/100).toFixed(2)}}
                                </Col>
                            </Row>
                        </div>
                        <div class="offer-result-detail-list">
                            <Row type="flex"  align="middle">
                                <Col span="12">
                                    生效日期
                                </Col>
                                <Col span="12" class="result-detail-list-right">
                                    {{stateCarQuote.ciBeginDate}}
                                </Col>
                            </Row>
                        </div>
                        <div class="offer-result-detail-list">
                            <Row type="flex"  align="middle">
                                <Col span="12">
                                    交强险
                                </Col>
                                <Col span="12" class="result-detail-list-right">
                                    ￥{{stateCarQuote.ciPremium}}
                                </Col>
                            </Row>
                        </div>
                        <div class="offer-result-detail-list">
                            <Row type="flex"  align="middle">
                                <Col span="12">
                                    车船税
                                </Col>
                                <Col span="12" class="result-detail-list-right">
                                    ￥{{stateCarQuote.carshipTax}}
                                </Col>
                            </Row>
                        </div>
                    </div>
                    <div v-if="stateCarQuote.biPremium > 0">
                        <div class="offer-result-detail-title">
                            <Row type="flex"  align="middle">
                                <Col span="12" class="result-detail-type">
                                    <h3>商业险</h3>
                                </Col>
                                <Col span="12" class="result-detail-type-r">
                                    ￥{{stateCarQuote.biPremium}}
                                </Col>
                            </Row>
                        </div>
                        <div class="offer-result-detail-list">
                            <Row type="flex"  align="middle">
                                <Col span="12">
                                    生效日期
                                </Col>
                                <Col span="12" class="result-detail-list-right">
                                    {{stateCarQuote.biBeginDate}}
                                </Col>
                            </Row>
                        </div>
                        <div class="offer-result-detail-list" v-for="(sitem,sindex) in stateCarQuote.coverageList">
                            <Row type="flex" justify="space-between"  align="middle">
                                <Col span="12">
                                    {{sitem.coverageName}}
                                </Col>
                                <Col span="6" class="result-detail-list-right" v-if="sitem.insuredAmount != 'Y'&&sitem.insuredAmount != 'N' ">
                                    保额：￥{{sitem.amount}}
                                </Col>
                                <Col span="6" class="result-detail-list-right">
                                    ￥{{sitem.insuredPremium}}
                                </Col>
                            </Row>
                        </div>
                    </div>
                    <div class="offer-result-detail-money" v-if="stateCarQuote.errorCode">
                        <Row type="flex"  align="middle">
                            <Col span="12">
                                积分：<b>{{stateCarQuote.integral}}</b>
                            </Col>
                            <Col span="12" class="result-detail-list-right">
                                总保费：<b>{{((stateCarQuote.ciPremium *100 + stateCarQuote.carshipTax * 100 + stateCarQuote.biPremium *100)/100).toFixed(2)}}</b>元
                            </Col>
                        </Row>
                    </div>    
                </div>
                <Row type="flex" justify="center" align="middle">
                    <Col span="24" class="statement">
                        <Checkbox v-model="single">本人以认真阅读并同意</Checkbox><span @click="statementShow">《投保须知》</span>
                    </Col>
                </Row>
                <Row class="next-btn">
                    <Col span="3" offset="15">
                        <Button long type="primary" size="large" shape="circle" @click="next">立即支付</Button>                    
                    </Col>
                    <Col span="3" offset="1">
                        <Button long type="ghost" size="large" shape="circle" @click="goBack">返回上一步</Button>
                    </Col>
                </Row>   
            </div>           
        </div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Modal v-model="statementModal" width="800">
            <p slot="header" style="color:#fff;text-align:center">
                投保须知
            </p>
            <div style="text-align:center; height:400px;overflow:auto;" v-html="statementText">
                <!-- {{statementText}} -->
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long  @click="statementShow">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import city2 from '../../asset/js/city2'
import { statement , applyUnderwrite , saveInsurance} from '../../api/api'
import util from '../../libs/util'
export default {
    data () {
        return {
            spinShow: false,
            coverageList:[],
            filterCoverage:[],
            MCoverage:{},
            single:false,
            statementText:'',
            statementModal:false,
            biProposalNo:'',
            ciProposalNo:'',
            key:'',
        }
    },
    components: {
        productTitle
    },
    computed: {
        stateCarinfo(){
            return this.$store.state.carinfo
        },
        stateCarQuote(){
            return this.$store.state.carQuote
        }
    },
    mounted () {
        this.getStateMent()
    },
    methods: {
        saveData(){
            let _personInfo = {
                ownerName:this.stateCarinfo.ownerName,
                ownerID:this.stateCarinfo.ownerID,
                ownerMobile:this.stateCarinfo.ownerMobile,
                insuredName:this.stateCarinfo.insuredName,
                insuredID:this.stateCarinfo.insuredID,
                insuredMobile:this.stateCarinfo.insuredMobile,
                applicantName:this.stateCarinfo.applicantName,
                applicantID:this.stateCarinfo.applicantID,
                applicantMobile:this.stateCarinfo.applicantMobile,
                addresseeName:this.stateCarinfo.addresseeName,
                policyEmail:this.stateCarinfo.policyEmail,
                addresseeMobile:this.stateCarinfo.addresseeMobile,
                addresseeProvince:this.stateCarinfo.addresseeProvince,
                addresseeProvinceName:this.stateCarinfo.addresseeProvinceName,
                addresseeCity:this.stateCarinfo.addresseeCity,
                addresseeCityName:this.stateCarinfo.addresseeCityName,
                addresseeCounty:this.stateCarinfo.addresseeCounty,
                addresseeCountyName:this.stateCarinfo.addresseeCountyName,
                addresseeDetails:this.stateCarinfo.addresseeDetails,
            }
            let _carinfo = {
                licenseNo:this.stateCarinfo.licenseNo,
                frameNo:this.stateCarinfo.frameNo,
                brandCode:this.stateCarinfo.brandCode,
                brandName:this.stateCarinfo.brandName,
                engineNo:this.stateCarinfo.engineNo,
                isTrans:this.stateCarinfo.isTrans,
                firstRegisterDate:this.stateCarinfo.firstRegisterDate,
                transDate:this.stateCarinfo.transDate ? this.stateCarinfo.transDate : '',
            }
            let _obj = {}
            _obj.thpBizID = this.stateCarQuote.thpBizID
            _obj.responseNo = this.stateCarinfo.responseNo
            _obj.cityCode = this.stateCarinfo.cityCode
            _obj.thpBizID = this.stateCarQuote.thpBizID
            _obj.coverageList = this.stateCarQuote.coverageList
            _obj.biBeginDate = this.stateCarQuote.biBeginDate
            _obj.ciBeginDate = this.stateCarQuote.ciBeginDate
            _obj.ciPremium = this.stateCarQuote.ciPremium
            _obj.carshipTax = this.stateCarQuote.carshipTax
            _obj.biPremium = this.stateCarQuote.biPremium
            _obj.integral = this.stateCarQuote.integral
            _obj.insurerCode = this.stateCarinfo.insurerCode
            _obj.insurerName = this.stateCarinfo.insurerName
            _obj.bizID = this.stateCarinfo.bizID,
            _obj.channelCode = this.stateCarinfo.channelCode,
            _obj.premium = ((this.stateCarQuote.ciPremium *100 + this.stateCarQuote.carshipTax * 100 + this.stateCarQuote.biPremium *100)/100).toFixed(2)
            _obj.ciProposalNo = this.ciProposalNo
            _obj.biProposalNo = this.biProposalNo
            _obj.key = this.key
            _obj.uid = sessionStorage.getItem('id')
            _obj.carInfo = _carinfo
            _obj.personInfo = _personInfo
            console.log(_obj)
            return new Promise((resolve, reject) => {
                saveInsurance(_obj).then(response=>{
                    console.log(response)
                    resolve(response)
                    // if(response.data.status == 200){
                    //     this.$router.push({name:'offer_detail'})
                    // }else{
                    //     this.$Message.error(response.data.message)
                    // }
                })
            }).catch(error => {
                reject(error);
            });
            
        },
        UnderWrite(){

            let _key = util.md5s(parseInt(new Date().getTime()/1000)+'')
            this.key = _key
            let _obj = {
                    insurerCode : this.stateCarinfo.insurerCode,
                    bizID : this.stateCarinfo.bizID,
                    channelCode:this.stateCarinfo.channelCode,
                    addresseeName:this.stateCarinfo.addresseeName,
                    addresseeMobile:this.stateCarinfo.addresseeMobile,
                    addresseeDetails:this.stateCarinfo.addresseeDetails,
                    addresseeCounty:this.stateCarinfo.addresseeCounty,
                    addresseeCity:this.stateCarinfo.addresseeCity,
                    addresseeProvince:this.stateCarinfo.addresseeProvince,
                    policyEmail:this.stateCarinfo.policyEmail,
                    applicantUrl:'https://biz.kuaibao365.com/#/car/finish/'+this.stateCarinfo.bizID + '/'+ this.key
                }
                return new Promise((resolve, reject) => {
                    applyUnderwrite(_obj).then(response => {
                        console.log(response.data)
                        resolve(response)
                        // if (response.data.state == 1&&response.data.data.synchFlag == 0) {
                        //     if(response.data.data.payLink){
                        //         window.location.href =  response.data.data.payLink
                        //     }else{
                        //          this.$Message.error('操作失败，请重试！')
                        //     }
                        // } else {
                        //     this.$Message.error(response.data.msg)
                        // }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
        },
        statementShow(){
            this.statementModal = !this.statementModal
        },
        next(){
            if(this.single){
                this.UnderWrite().then(response=>{
                    if (response.data.state == 1&&response.data.data.synchFlag == 0) {
                        this.ciProposalNo = response.data.data.ciProposalNo
                        this.biProposalNo = response.data.data.biProposalNo
                        this.saveData().then(data=>{
                            if(data.data.status == 200){
                                if(response.data.data.payLink){
                                    window.location.href =  response.data.data.payLink
                                }else{
                                        this.$Message.error('操作失败，请重试！')
                                }
                            }else{
                                this.$Message.error(response.data.message)
                            }
                        })

                        
                    } else {
                        this.$Message.error(response.data.msg)
                    }
                })
                // this.saveData().then(data=>{
                //     if(data.data.status == 200){
                //         //this.UnderWrite()
                //     }else{
                //         this.$Message.error(data.data.message)
                //     }
                // })
                
            }else{
                this.$Message.info('请先阅读并同意《投保须知》！')
            }
             
        },
        goBack(){
            window.history.go(-1);
        },
        getStateMent(){
            let _params = {
                insurerCodes:this.stateCarinfo.insurerCode
            }
            new Promise((resolve, reject) => {
                statement(_params).then(response => {
                    console.log(response.data)
                    if (response.data.state == 1) {
                        this.statementText = response.data.data[0].statementContent
                    } else {
                        
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            }); 
        }
    }
}
</script>
